{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">ora脚本历史版本</h3>
        <div class="col-md-12 column" id="table_pagination">
            <div class="col-md-2">
                <input type="text" name="user_search" class="form-control" placeholder="Search" id="aa_search"
                       aa_search_set="{{ search }}">
            </div>
            <button type="button" class="btn btn-default" onclick="select_page_num(1)"><span
                    class="glyphicon glyphicon-search"
                    aria-hidden="true"></span> 搜索
            </button>
            <div>&nbsp</div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    {#                    <th>+</th>#}
                    <th>服务器IP</th>
                    <th>PATH</th>
                    <th>备注</th>
                    <th>时间</th>
                    <th>内容</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {% for i in current_page %}
                    <tr>
                        {#                        <td><input type="checkbox"/></td>#}
                        <td style="display:none">{{ i.id }}</td>
                        <td>{{ i.server_ip }}</td>
                        <td>{{ i.shell_path }}</td>
                        <td>{{ i.change_show }}</td>
                        <td>{{ i.crtime }}</td>

                        <td>
                            <a style="cursor:pointer"
                               onclick="oratk_tool_script_content({{ i.id }})">查看脚本内容</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {#分页#}
            {% include 'basic_app/paginator_common_ajax.html' %}

        </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">ora脚本内容(当前版本) &nbsp
            <button type="button" class="btn btn-default"
                    onclick="script_content_edit()"><span
                    class="glyphicon glyphicon-wrench" aria-hidden="true"></span> 修改脚本内容
            </button>
        </h3>

        <pre type="text" name="res" id="res">{{ res_suc }} {{ res_err }}</pre>
    </div>

    {#    查看脚本内容的模态框#}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width:1000px" id="docModalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">脚本内容</h4>
                </div>
                <span>&nbsp</span>
                <div class="col-sm-12 modal-body">
                            <textarea id="script_conent" style="width:960px;height:720px" type="text_area"
                                      name="script_conent" placeholder="script_conent"></textarea>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    {#    编辑脚本内容的模态框#}
    <div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1000px" id="docModalContent_edit">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">脚本内容</h4>
                </div>
                <div>&nbsp</div>
                <div class="col-md-4">
                    <input type="text"  class="form-control" placeholder="请输入修改说明" id="script_content_edit_submit">
                </div>
                <button type="button" class="btn btn-primary" onclick="script_content_edit_submit()"><span
                        class="glyphicon glyphicon-ok"
                        aria-hidden="true"></span> 提交
                </button>
                <div>&nbsp</div>
                <div class="col-sm-12">
                            <textarea id="script_content_edit" style="width:960px;height:710px" type="text_area"
                                      name="script_content_edit" placeholder="script_content_edit"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

{% endblock %}


{% block script %}
    <script>
        //查看脚本内容
        function oratk_tool_script_content(id) {
            var nid = id;
            $.ajax({
                type: "POST",
                data: {
                    'nid': nid,
                    'script_content_byid': 'YES'
                },
                url: "/oratk_app/oratk_tool_info_ora_shell_paginator_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#script_conent").val(result);
                    $('#script_conent').attr("disabled", "disabled");
                    //调用模态框
                    $('#myModal').modal('show')
                }
            })
        }

        //修改脚本内容
        function script_content_edit() {
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_shell_edit_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    console.log(1)
                    $("#script_content_edit").val(result);
                    console.log(2)
                    //调用模态框
                    $('#myModal_edit').modal('show')
                }
            })
        }


        //修改脚本内容提交
        function script_content_edit_submit(){
            var shell_content = $('#script_content_edit').val()
            var change_desc = $('#script_content_edit_submit').val()
            if ( change_desc.length == 0 ){
                alert('请输入修改说明');
                return false;
            }
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_shell_edit", //后台处理函数的url
                data: {
                    'shell_content':shell_content,
                    'change_desc':change_desc
                },
                cache: false,
                dataType: "html",
                success: function (result) {
                   if (result == 'success'){
                       location.reload();
                   }else {
                      alert(result) ;
                   }

                }
            })
        }

        //查看编辑脚本内容模态框居中
        $("#myModal_edit").on('show.bs.modal', function () {
            modalResize_edit()
        })
        //编辑脚本内容模态框居中
        $(window).resize(function () {
            modalResize_edit();
        })

        function modalResize_edit() {
            console.log(4)
            var winWidth = $(document.body).width();
            var modalWidth = $("#docModalContent_edit").width();
            var width = (winWidth - modalWidth) / 2 + "px"
            console.log(winWidth, modalWidth, width)
            $("#myModal_edit").find(".modal-dialog_edit").css({
                'margin-left': width
            });
        }


    </script>
{% endblock %}